<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="../css/global.css" media="all">
		<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="../css/table.css" />
	</head>

	<body>
		<div class="admin-main">

			<blockquote class="layui-elem-quote">
				<a href="javascript:;" class="layui-btn layui-btn-small layui-btn-danger" id="add"><i class="layui-icon"></i> 删除</a>
				<!--<a href="javascript:;" class="layui-btn layui-btn-small" id="add">
					<i class="layui-icon">&#xe608;</i> 添加信息
				</a>
				<a href="#" class="layui-btn layui-btn-small" id="import">
					<i class="layui-icon">&#xe608;</i> 导入信息
				</a>
				<a href="#" class="layui-btn layui-btn-small">
					<i class="fa fa-shopping-cart" aria-hidden="true"></i> 导出信息
				</a>
				<a href="javascript:;" class="layui-btn layui-btn-small" id="search">
					<i class="layui-icon">&#xe615;</i> 搜索
				</a>-->
			</blockquote>
			<fieldset class="layui-elem-field">
				<legend>数据列表</legend>
				<div class="layui-field-box">
					<table class="site-table table-hover">
						<thead>
							<tr>
								<th><input type="checkbox" id="selected-all"></th>
								<th>ID</th>
								<th>标题</th>
								<th>图表类型</th>
								<th>创建时间</th>
								<th>更新时间</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody class="jqList">
							<!--<tr>
								<td><input type="checkbox"></td>
								<td>Layui</td>
								<td>
									<a href="/manage/article_edit_1">演示站点发布成功啦。</a>
								</td>
								<td>Beginner</td>
								<td>2016-11-16 11:50</td>
								<td>1298</td>
								<td>
									<a href="/detail-1" target="_blank" class="layui-btn layui-btn-normal layui-btn-mini">预览</a>
									<a href="javascript:;" data-id="1" data-opt="del" class="layui-btn layui-btn-danger layui-btn-mini">删除</a>
								</td>
							</tr>-->
						</tbody>
					</table>

				</div>
			</fieldset>
			<div class="admin-table-page">
				<div id="page" class="page">
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../plugins/layui/layui.js"></script>
		<script>
			layui.config({
				base: '../plugins/layui/modules/'
			});

			layui.use(['icheck', 'laypage','layer'], function() {
				var $ = layui.jquery,
					laypage = layui.laypage,
					layer = parent.layer === undefined ? layui.layer : parent.layer;
				$('input').iCheck({
					checkboxClass: 'icheckbox_flat-green'
				});

				//page
				//每页条数
				var num = 10;
				//当前页数
				var page = 1;
				//静态发布页根地址
				var baseUrl = 'http://61.155.85.77:8999';
				function getChartType(type){
					var typeName = '未知';
					switch (type){
						case 'bar':
							typeName = '柱状图';
							break;
						case 'line':
							typeName = '条形图';
							break;
						case 'pie':
							typeName = '饼图';
							break;
						case 'map':
							typeName = '地图';
							break;
						case 'gauge':
							typeName = '仪表盘';
							break;
					}
					return typeName;
				}
				$.get("/getChartCount",function(data){
					if(data.success){
						var pages = data.data['count(*)'];
						laypage({
							cont: 'page',
							pages: Math.ceil(pages/num),
							jump: function(obj, first) {
								//全选取消
								$('#selected-all').iCheck('uncheck');
								//得到了当前页，用于向服务端请求对应数据
								var curr = obj.curr;
								$.get("/getChartList?page="+(curr-1)*num+'&num='+num,function(data2){
									if(data2.success){
										var arr = data2.data;
										var list = "";
										$.each(arr, function(i,e) {
											var temp = [];
											temp.push("<tr>");
											
											temp.push("<td><input type=\"checkbox\"></td>");
											temp.push("<td>"+e.id+"</td>");
											temp.push("<td>"+(e.chartname)+"</td>");
											temp.push("<td>"+getChartType(e.chart_type)+"</td>");
											temp.push("<td>"+getdate(e.create_time)+"</td>");
											temp.push("<td>"+getdate(e.modify_time)+"</td>");
											temp.push("<td><a href=\"/showChartById?id='"+e.id+"'\" title=\""+e.chartname+"\" class=\"layui-btn layui-btn-normal layui-btn-mini jqPreview\">预览</a>\
											<a href=\"javascript:;\" data-id=\""+e.id+"\" data-url=\""+e.html_file+"\" class=\"layui-btn layui-btn-normal layui-btn-mini jqRequire\">引用</a>\
											<a href=\"javascript:;\" data-id=\""+e.id+"\" data-opt=\"del\" class=\"layui-btn layui-btn-danger layui-btn-mini jqDelete\">删除</a></td>");
											
											temp.push("</tr>");
											list += temp.join('');
										});
										$('.jqList').empty().append(list);
										//重新渲染checkbox样式
										$('.jqList input[type=checkbox]').iCheck({checkboxClass:'icheckbox_flat-green'});
										bindTrEvent();
									}
								})
							}
						});
					}
				})
				function bindTrEvent(){
					//全选
					$('.site-table tbody tr').off('click').on('click', function(event) {
						var $this = $(this);
						var $input = $this.children('td').eq(0).find('input');
						$input.on('ifChecked', function(e) {
							$this.css('background-color', '#EEEEEE');
						});
						$input.on('ifUnchecked', function(e) {
							$this.removeAttr('style');
						});
						$input.iCheck('toggle');
					}).find('input').each(function() {
						var $this = $(this);
						$this.on('ifChecked', function(e) {
							$this.parents('tr').css('background-color', '#EEEEEE');
						});
						$this.on('ifUnchecked', function(e) {
							$this.parents('tr').removeAttr('style');
						});
					});
					//预览
					$('.jqPreview').off('click').on('click',function(e){
						var $obj = $(this);
						e.preventDefault();
						e.stopPropagation();
						layer.open({
							title:$obj.attr("title")+' - 预览',
							type:2,
							content:$obj.attr("href"),
							btn:['关闭'],
							area:['600px','400px'],
							maxmin:false,
							cancel: function(index) {
								layer.close(index);
							}
						});
					})
					//引用
					$('.jqRequire').off('click').on('click',function(e){
						var $obj = $(this);
						var id = $obj.attr("data-id");
						var url = $obj.attr("data-url");
						e.preventDefault();
						e.stopPropagation();
						layer.open({
							title:'引用说明',
							type:1,
							content:'<fieldset class="layui-elem-field"><legend>方式一：容器必须定义宽和高</legend>'+'<pre class="markup">'+('&lt;div data-bind-chart="'+id+'"&gt&lt;/div&gt\r\n\r\n//需要在底部引用\r\n&lt;script type="text/javascript" src="'+baseUrl+'\/jquery.chart.builder.min.js"&gt&lt;\/script&gt').toString()+'<\/pre><\/fieldset>'
							+'<fieldset class="layui-elem-field"><legend>方式二：以iframe形式引用</legend>'+'<pre class="markup">'+(baseUrl+url).toString()+'<\/pre><\/fieldset>',
							btn:['关闭'],
							area:['600px','400px'],
							maxmin:false,
							cancel: function(index) {
								layer.close(index);
							}
						});
					})
				}
				$('#selected-all').on('ifChanged', function(event) {
					var $input = $('.site-table tbody tr td').find('input');
					$input.iCheck(event.currentTarget.checked ? 'check' : 'uncheck');
				});
			});
		</script>
	</body>

</html>